<template>
  <div class="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  props: {
    handleToScroll: {type: Function, default: function(){}},
    handleToTouchEnd: {type: Function, default: function(){}},
  },
  mounted() {
    let scroll = new Bscroll(this.$refs.wrapper, {
      tap: true,
      probeType: 2,
      scrollbar: true,
      mouseWheel: true
    })
    this.scroll = scroll
    scroll.on('scroll', (pos) => {
      this.handleToScroll(pos)
    })
    scroll.on('touchEnd', pos => {
      this.handleToTouchEnd(pos)
    })
  },
  methods: {
    handleScrollTo(y) {
      this.scroll.scrollTo(0, y)
    }
  }
}
</script>

<style scoped>
.wrapper {
  height: 100%;
}
</style>
